import React, { useEffect, useState } from "react";
import { Box, List, ListItem } from "@mui/material";
import MessageItem from "./MessageItem";
import { client } from "../../../api/appsync";

interface Message {
  id: string;
  content: string;
  sender: string;
  createdAt: string;
}

const MessageList: React.FC<{ roomId: string }> = ({ roomId }) => {
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    /*
    const sub = client
      .graphql({
        query: `subscription OnMessageReceived($roomId: ID!) {
        onMessageReceived(roomId: $roomId) {
          id
          content
          sender
          createdAt
        }
      }`,
        variables: { roomId },
      })
      .subscribe({
        next: ({ data }) => {
          setMessages((prev) => [...prev, data.onMessageReceived]);
        },
        error: (error) => console.error("Subscription error:", error),
      });
*/
    // メッセージ履歴を取得する
    const fetchMessages = async () => {
      try {
        /*

        const { data } = await client.graphql({
          query: `query GetMessages($roomId: ID!) {
            getMessages(roomId: $roomId) {
              items {
                id
                content
                sender
                createdAt
              }
            }
          }`,
          variables: { roomId },
        });
        setMessages(data.getMessages.items);
        */
        setMessages([
          {
            id: "1",
            content:
              "メッセージのメッセージのメッセージのメッセージメッセージのメッセージのメッセージのメッセージの1",
            sender: "name1",
            createdAt: "2024-07-01T00:00:00Z",
          },
          {
            id: "2",
            content: "メッセージのメッセージの2",
            sender: "same2",
            createdAt: "2024-07-02T00:00:00Z",
          },
          {
            id: "3",
            content:
              "メッセージのメッセージのメッセージのメッセージメッセージのメッセージのメッセージのメッセージの3",
            sender: "same2",
            createdAt: "2024-07-03T00:00:00Z",
          },
          {
            id: "4",
            content: "メッセージの4",
            sender: "name1",
            createdAt: "2024-07-04T00:00:00Z",
          },
          {
            id: "5",
            content:
              "メッセージのメッセージのメッセージのメッセージメッセージのメッセージのメッセージのメッセージの5",
            sender: "name1",
            createdAt: "2024-07-05T00:00:00Z",
          },
        ]);
      } catch (error) {
        console.error("Error fetching messages:", error);
      }
    };

    fetchMessages();

    //return () => sub.unsubscribe();
    return () => {};
  }, [roomId]);

  return (
    <Box sx={{ flexGrow: 1, overflowY: "auto" }}>
      <List>
        {messages.map((message) => (
          <ListItem
            key={message.id}
            sx={
              message.sender !== "name1"
                ? { justifyContent: "flex-start" }
                : { justifyContent: "flex-end" }
            }
          >
            <MessageItem data={message} />
          </ListItem>
        ))}
      </List>
    </Box>
  );
};

export default MessageList;
